<template>
<div class="bPop" v-if="isShow">
    <div class="bPop-con">
        <div class="bPopClose" @click="isShow=false">
            <i class="el-icon-close"></i>
        </div>
        <div class="bPop-c">
            <div class="bPop-c-l"> We use cookies to analyze and improve our services to enhance and personalize content, advertising, and your digital experience. We also share information about your use of our site with our social media, advertising and analytics partners. By selecting "Accept All Cookies ", closing the banner instructions, or continuing to browse our website, you agree to our use of cookies. 
                <!-- Click to view the <a href="" target="_blank" class="link">Privacy policy</a> -->
            </div>
            <div class="bPop-c-r">
                <span class="btn" @click="accept">Accept All Cookies</span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            isShow: true
        }
    },
    mounted() {
        if(this.$cookies.get('privacy')==1){
            this.isShow=false;
        }
    },
    methods:{
        accept(){
            this.$cookies.set('privacy',1)
            this.isShow=false
        }
    }
}
</script>

<style lang="scss" scoped>
.bPop {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 9999999;
    padding: 10px 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, .8);
    box-sizing: border-box;
}

.bPop .link {
    font-weight: bold;
    white-space: nowrap;
}

.bPop-c {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bPop-c-l {
    width: 80%;
    flex: 0 0 80%;
    word-break: break-word;
}

.bPop-c-r {
    width: 20%;
    flex: 0 0 20%;
}

.bPop-c-r {
    display: flex;
    justify-content: center;
    align-items: center;
}

.bPop .btn {
    height: 32px;
    width: 140px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    float: right;
    background-color: #4BAA75;
    padding: 0;
    text-decoration: none;
}

.bPopClose {
    position: fixed;
    bottom: 15px;
    right: 10px;
    z-index: 99999999;
    cursor: pointer;
    .el-icon-close{
        color:#fff;
        font-size:20px;
    }
}


@media (max-width:767px) {
    .bPop {
        padding: 10px;
    }

    .bPopClose {
        bottom:80px;
    }
    .bPop-c{
        flex-direction: column;
        align-items: flex-start;
    }
    .bPop-c-l {
        width: 90%;
        flex: 0 0 90%;
        font-size: 12px;
        margin-bottom: 10px;
        word-break: break-word;
        text-align: justify;
    }

    .bPop-c-r {
        width: 100%;
        flex: 0 0 100%;
    }

    .bPop .btn {
        height: 24px;
        width: 140px;
        line-height: 24px;
        font-size: 12px;
    }
}
</style>
